<template>
<!-- 菜单管理 -->
  <div class='container'>
    <el-card>
      <el-col :span="24" style="text-align: right;margin-bottom:15px">
        <el-button type="success" size="small" icon="el-icon-edit" @click="addMenu">
          {{$t("table.addTags")}}</el-button>
      </el-col>
      <el-table
        v-loading="loading"
        element-loading-text="给我一点时间"
        :header-cell-style="{background:'#FAFAFA'}"
        fit
        highlight-current-row
        :data="menuList"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'childs', hasChildren: 'hasChildren'}"
        style="width: 100%">
        <el-table-column
          prop="title"
         :label="$t('table.titleName')"
          width="200">
          <template slot-scope="{row}">
            <span v-if="row.is_point">
              <i class="el-icon-view"></i>{{row.title}}
            </span>
            <span v-else-if="!row.childs||row.points">
              <i class="el-icon-document"></i>{{row.title}}
            </span>
            <span v-else-if="row.childs&&!row.points">
              <i class="el-icon-folder-opened"></i>{{row.title}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
         :label="$t('table.powerCode')"
         >
        </el-table-column>
        <el-table-column
       :label="$t('table.actions')"
        width="120"
        >
        <template slot-scope="{row}">
            <el-button title="编辑" plain type="primary" icon="el-icon-edit" circle @click="editMenu(row)"></el-button>
            <el-button title="删除" class="btn" plain type="danger" icon="el-icon-delete" circle @click="deleteMenu(row)"></el-button>
        </template>
      </el-table-column>
      </el-table>
    </el-card>
    <menu-add
      ref="menu_add"
      @handleCloseModal='closeModal'
      @refresh='loadMenuList'
    ></menu-add>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus.js'
import MenuAdd from '../components/menu-add.vue'

export default {
  name: 'menus',
  components: {
    MenuAdd
  },
  data () {
    return {
      menuList: [],
      loading: true
    }
  },

  created () {
    this.loadMenuList()
  },

  methods: {
    // 获取菜单列表
    async loadMenuList () {
      const res = await list()
      this.menuList = this.digui(res.data)
      this.loading = false
    },
    // 递归
    digui (arr) {
      const newArr = []
      arr.forEach((item, index) => {
        newArr[index] = item
        if (item.points) {
          newArr[index].childs = this.digui(item.points)
        }
        if (item.childs) {
          newArr[index].childs = this.digui(item.childs)
        }
      })
      return newArr
    },
    // 添加标签
    addMenu () {
      this.$refs.menu_add.dialogFormV()
    },
    // 关闭弹层
    closeModal () {
      this.$refs.menu_add.dialogFormH()
    },
    // 编辑菜单
    editMenu (row) {
      this.$refs.menu_add.selectId = row.id
      this.$refs.menu_add.dialogFormV()
      this.$refs.menu_add.hanldeEditForm(row.id)
      if (row.is_point) {
        this.$refs.menu_add.type = 'points'
      }
    },
    // 删除菜单
    deleteMenu (row) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove({
            id: row.id
          })
          this.$message.success('删除成功')
          this.loadMenuList()
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  padding: 10px;
  .el-table{
    margin: 15px 0;
  }
  /deep/.el-table__expand-icon {
    display: none ;
  }
  /deep/.el-table__placeholder{
    display: none;
  }
  .btn{

  }
}
</style>
